<template>
  <div class="fenlei">
    <div class="inner">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in categories"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
        >
          <!-- index+1+''是为了把原来的数字转化为字符串，否则会报错 -->
          <van-card
            @click-thumb="toDetail(i._id)"
            v-for="(i, index) in gproducts"
            :tag="index < 5 ? index + 1 + '' : ''"
            :key="i.id"
            :num="i.amount"
            :price="i.price.toFixed(2)"
            :title="i.name"
            :thumb="i.coverImg"
          />
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getcategories, getproducts } from "../../api/product";

export default {
  data() {
    return {
      activeKey: "",
      categories: [],
      gproducts: [],
      page: 1,
      pages: 0,
      loading: false,
      finished: false,
      value: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    async producttype() {
      let res = await getcategories();
      // console.log(res.categories);
      this.categories = res.categories;
    },
    async loadData() {
      this.loading = true;

      const resProducts = await getproducts(
        this.page,
        this.$route.params.id,
        this.value
      );
      // console.log(resProducts);
      this.gproducts.push(...resProducts.products);
      this.pages = resProducts.pages;
      this.page += 1;
      this.loading = false;
      // console.log(this.gproducts);
      // console.log(this.value);
      if (this.page > this.pages) {
        this.finished = true;
      }
    },
    toDetail(id) {
      this.$router.push("/detail/" + id);
    },
    onSearch() {
      if (this.value) {
        this.$router.push({
          name: "List",
          params: {
            name: this.value,
          },
        });
      }
    },
    onCancel() {
      this.value = "";
      this.$router.push({
        name: "List",
      });
    },
  },
  //组件内的路由跳转， 为了处理该组件内部跳转到新复用的该组件时出发路由钩子函数，
  //该部分是为了解决list主件中侧边栏跳转到指定内容的list无法触发这个问题
  //在调用该部分时，讲页面原数据（products、finished、page）进行格式化清空
  //然后重新调用程序
  beforeRouteUpdate(to, from, next) {
    this.gproducts = [];
    this.finished = false;
    this.page = 1;
    next();
    this.loadData();
    this.activeKey = this.categories.findIndex(
      (item) => item.name === this.$route.params.name
    );
  },
  created() {
    this.loadData();
    this.producttype();
    this.activeKey = this.categories.findIndex(
      (item) => item.name === this.$route.params.name
    );
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.fenlei {
  display: flex;
  flex-direction: column;
}
.inner {
  display: flex;
  overflow: auto;
}
.right {
  height: 100%;
  /* overflow: auto; */
  flex: 1;
}
</style>
